<html><!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>KISSY StyleSheet</title>
    <link href="assets/demo.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/stylesheet/assets/demo.css" rel="stylesheet" id="link1"/>
    <style>
        li {
            padding: 5px;
            border: 1px solid white;
        }

        h1 {
            font-size: 2em;
            margin: 10px;
            text-align: center;
        }

        h2 {
            font-size: 1.5em;
            margin: 10px;
            text-align: center;
        }

        #wrap {
            width: 90%;
            margin: 0 auto;
        }
    </style>
    <style id="style1">
        .test2 {
            color: green;
        }
    </style>

    <style id="style3">
        .test3 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <h1 id="describe">StyleSheet 演示</h1>

    <p class="test1"> test1 original red </p>

    <br>

    <p class="test2"> test2 original green </p>

    <div class="test3">test3 width</div>

    <div class="test3">test3 width 2</div>

    <button id="c1"> turn red to green</button>
    <button id="c2"> turn green to red</button>
    <button id="c3">enlarge test1</button>
    <button id="c4">enlarge test2</button>
    <button id="c5">see link cssText</button>
    <button id="c6">see style cssText</button>
    <button id="c7">restore large in test1</button>
    <button id="c8">remove class test1</button>

    <button id="c9">add class test3 in link1</button>

    <button id="c10">disable link1</button>

    <button id="c11">enlarge test3</button>
</div>
<script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
<script>
KISSY.use('json, gallery/pageNotification/1.0/index', function(S, JSON, PN) {
    var pn = new PN({
        "closeButton": true,
        "positionClass": "page-notification-top-right",
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    });

    window.alert = function() {
        var args = arguments[0];
        args = S.isObject(args) ? JSON.stringify(args) : args.toString();
        pn.success(args);
    };

    KISSY.getScript('assets/demo1.js');
});
</script>
</body>
</html>